<template>
	<view class="index">
		<!-- 分类列表 -->
		<scroll-view scroll-x="true" class="cate">
			<view :class="{'cate-item':true,'active':cateid==''}" @tap="cateClicked('')">
				推荐
			</view>
			<view :class="{'cate-item':true,'active':cateid==v._id}" v-for="(v,k) in categories" :key='k' @tap="cateClicked(v._id)">
				{{v.cat_name}}
			</view>

		</scroll-view>
		<!-- 视频列表 -->
		<view v-for="(v,k) in videos" :key='k' class="video">
			<video :src="v.video" controls></video>
			<view class="title">
				{{v.title}}
			</view>
			<!-- 用户信息 -->
			<view class="userMsg">
				<!--用户头像昵称 -->
				<view class="user">
					<image class="avatar" :src="v.avatar" mode="widthFix"></image>
					<text class="username">{{v.username}}</text>
				</view>
				<!-- 微信分享 -->
				<view class="share">
					<text>分享给:</text>
					<button class="shareBtn" open-type="share">
						<image src="../../static/wechat.png" mode="widthFix"></image>
					</button>
				</view>
			</view>
		</view>
		<!-- 加载提示 -->
		<view class="loodmore">
			{{more ? '视频加载中...':'没有更多视频了！'}}

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//是否下一页加载数据
				more: true,
				//分页
				page: 1,
				//视频列表
				videos: [],
				//分类列表
				categories: [],
				//当前选中的分类id
				cateid: ''
			}
		},
		//当页面加载完之后完成
		onLoad() {
			this.getVideos()
			//调用云函数获取分类数据
			uniCloud.callFunction({
				name: 'getCategories',
				data: {},
				success: (res) => {
					this.categories = res.result.data
				}
			})
		},
		//滚动到底触发
		onReachBottom() {
			//是否还有数据
			if (this.more) {
				this.page++
				//加载下一页数据
				uniCloud.callFunction({
					name: 'getVideos',
					data: {
						page: this.page
					},
					success: (res) => {
						//把获取到的数据拼接到数组中
						this.videos = this.videos.concat(res.result.data)
						//判断是否还有数据
						if (res.result.data.length < 5) {
							this.more = false
						}
					}
				})
			}

		},
		//下拉刷新事件
		onPullDownRefresh() {
			//重新设置当前页面的数据
			this.page = 1
			this.more = true
			//重新获取数据
			this.getVideos()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				// console.log(res.target)
			}
			console.log(res)
			return {
				title: 'Time',
				path: '/pages/index/index'
			}
		},
		methods: {
			//点击分类
			cateClicked(id) {
				//保存点击id
				this.cateid = id
				//获取对应id分类的视频
				uniCloud.callFunction({
					name: 'getVideos',
					data: {
						cateid: this.cateid
					},
					success: (res) => {
						this.videos = res.result.data
						//下拉刷新收回去
						uni.stopPullDownRefresh()
					}
				})
			},
			getVideos() {
				uniCloud.callFunction({
					name: 'getVideos',
					data: {
						cateid: this.cateid
					},
					success: (res) => {
						this.videos = res.result.data
						//下拉刷新收回去
						uni.stopPullDownRefresh()
					}
				})
			}
		}
	}
</script>

<style>
	video {
		width: 100%;
	}
	
	.shareBtn{
		padding: 0;
		display: initial;
		line-height: 1;
		background-color: initial;
	}
	
	.shareBtn::after{
		width: 0;
		height: 0;
	}

	.userMsg {
		display: flex;
		padding: 18rpx;
		color: #888;
		font-size: 30rpx;
	}

	.user {
		text-align: left;
		flex: 1;
		display: flex;
	}

	.share {
		display: flex;
		text-align: right;
		flex: 1;
		align-self: center;
	}

	.share text {
		flex: 1;
		margin-right: 50rpx;
	}

	.share image {
		width: 60rpx;
	}

	.username {
		margin-left: 20rpx;
		align-self: center;
	}

	.avatar {
		width: 70rpx;
		border-radius: 50%;
	}

	.loodmore {
		padding: 30rpx;
		text-align: center;
	}

	.cate {
		white-space: nowrap;
		width: 100%;
	}

	.cate-item {
		display: inline-block;
		padding: 20rpx;
		font-size: 36rpx;
	}

	.title {
		padding: 18rpx;
	}

	.active {
		color: #FF0000;
		font-size: 45rpx;
		border-bottom: 5rpx solid #FF0000;
	}
</style>
